<template>
	<view class="xiaoliurenzhanbu">

		<view class="base_info">

			<view class="show">
				<text class="l">您掷出随机数:</text>
				<text class="r">{{data.number}}</text>
			</view>
			<view class="show">
				<text class="l">卦名:</text>
				<text class="r">{{data.guaming}}</text>
			</view>
			<view class="show">
				<text class="l">吉凶:</text>
				<text class="r">{{data.description['凶吉']}}</text>
			</view>
			<view class="show">
				<text class="l">卦曰:</text>
				<text class="r">{{data.description['卦曰']}}</text>
			</view>
			
			<view class="show">
				<text class="l">解卦:</text>
				<text class="r">{{data.description['解曰']}}</text>
			</view>
	
			
		</view>



		<view class="base_info">
			

			<view class="details">
				<view class="names">
					<text>运势：</text>
				
				</view>
				<view class="des">
					<text class="des_deta">{{data.description['运势']}}</text>
				</view>
				
			</view>
			
			<view class="details">
				<view class="names">
					<text>财富：</text>
				
				</view>
				<view class="des">
					<text class="des_deta">{{data.description['财富']}}</text>
				</view>
				
			</view>
			<view class="details">
				<view class="names">
					<text>感情：</text>
				
				</view>
				<view class="des">
					<text class="des_deta">{{data.description['感情']}}</text>
				</view>
				
			</view>
			<view class="details">
				<view class="names">
					<text>事业：</text>
				
				</view>
				<view class="des">
					<text class="des_deta">{{data.description['事业']}}</text>
				</view>
				
			</view>
			<view class="details">
				<view class="names">
					<text>身体：</text>
				
				</view>
				<view class="des">
					<text class="des_deta">{{data.description['身体']}}</text>
				</view>
				
			</view>
			<view class="details">
				<view class="names">
					<text>神鬼：</text>
				
				</view>
				<view class="des">
					<text class="des_deta">{{data.description['神鬼']}}</text>
				</view>
				
			</view>
			<view class="details">
				<view class="names">
					<text>行人：</text>
				
				</view>
				<view class="des">
					<text class="des_deta">{{data.description['行人']}}</text>
				</view>
				
			</view>
		

		</view>
		<view class="yl">
			<text>仅供娱乐！请勿当真</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ff: {},
				data: {
			     "number": 100, //您输入随机数 100
			    "guaming": "大安", //卦名
			    "description": {
			      "卦曰": "身未动时，属木青龙．谋事一五七，贵人西南，冲犯东方，大人青面阴神，小孩婆祖六畜惊。",
			      "解曰": "大安事事昌，求财在坤方，失物去不远，宅舍保安康，行人身未动，病者主无妨，将军回田野，仔细更推详。",
			      "凶吉": "卜到大安，属吉卦，凡事都可以得到安康，但是此为静卦，宜静不宜动。",
			      "运势": "目前运势还不错，有稳定成长的情况，但不宜躁进。",
			      "财富": "求财可，但是目前不宜扩张，只能够守住旧业。",
			      "感情": "若为女子问则好，感情顺遂。若为男子问则较差，感情虽稳，但是以无新鲜感，会出现点小问题。",
			      "事业": "目前工作稳定，可得上司赏识，但切勿锋芒太露。",
			      "身体": "身体没有大病，但须注意病由口入，或因过度操劳而得病。",
			      "神鬼": "大安为解灾之神，鬼神之事问题不大，若是小孩为自身惊吓所致，若是大人则为冲犯东方之煞神或犯土煞。",
			      "行人": "人平安，但目前不愿与自身连络。"
			    }
				}
			}
		},
		onLoad(options) {
			 this.data=JSON.parse(options.data)
			// console.log(this.data)
			// console.log(options.data)

		}
	}
</script>

<style lang="scss">
	@mixin flex {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 8px;
		height: 45px;
	}
	
	@mixin tr1_w {
		width: 33px;
		text-align: center;
	
	}
	text{
		user-select: all;
	}
	.xiaoliurenzhanbu {

		.base_info {
			margin: 20px;

			.title {
				display: flex;
				padding: 10rpx;

				.shu {

					width: 5px;
					height: 20px;
					background-color: #e6a84b;
					border-radius: $uni-border-radius-base;
				}

				.ti {
					padding-left: 15rpx;
					font-weight: 800;
					font-size: 30rpx;
				}
			}

			.show {
				margin-top: 15px;

				.l{
					font-size: 28rpx;
					display: inline-block;
				
					font-weight: 800;
				}

				.r {
				padding-left: 20rpx;

				}

				
			}

			.details {
				border: 1px solid #e5e5e5;
				border-bottom: none;
				margin-top: 20px;
				.names {
					text-align: center;
					color: #e6a84b;
					border-bottom: 1px solid #e5e5e5;
					color: #e6a84b;
					font-weight: 800;
					background-color: #fff3ef;
					height: 50px;
					line-height: 50px;
				}

				.des {
					border-bottom: 1px solid #e5e5e5;
					padding-left: 20rpx;
					display: flex;
					align-items: center;

					.des_text {
						color: #e6a84b;
						width: 14%;
						font-weight: 800;
						user-select:text;
					}

					.des_deta {
						width: 100%;
						line-height: 26px;
						text-indent: 2em;
						user-select:text;
					}
				}
			}
		}

	}
</style>